function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    } else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

//写成全局 所有操作都要用到
var stompClient = null;
var tryTimes = 0;//重连次数
var userid = '1';
var reconnectTimer = null;

function connect() {
    //让websocket连接的端点
    var socket = new SockJS('http://localhost:8882/websocket');
    stompClient = Stomp.over(socket);
    /** 加入请求头的方式
     *   var headers={
     *     username:$("#username").val(),
     *     password:$("#password").val()
     *   };
     *   stompClient.connect(headers, function (frame) {.....
     */
    stompClient.connect({}, function (frame) {
            setConnected(true);
            heartCheck.reset().start(); //开始心跳检测
            tryTimes = 0;//重置重连次数

            //连接成功之后的其他操作...

            //订阅(该路由专门用于心跳检测）
            stompClient.subscribe('/user/hart/' + userid + '/message', function (result) {
                console.log("pong")
                heartCheck.reset().start(); //心跳检测重置
            });

            //普通订阅(如果路径没有指定userid 那么服务器发到这个路径的消息都可以收到）
            //如果要取消订阅 要使用下面subscribe返回的对象 再调用该对象的unsubscribe()
            stompClient.subscribe('/user/' + userid + '/message', function (result) {
                //获得result的body 再用JSON.parse解析
                var body = JSON.parse(result.body);
                showGreeting(JSON.parse(result.body).content);
            });
            stompClient.debug = () => {}
        },
        function (errorCallback) {
            //连接失败的操作...（该方法非必须）
            console.log(errorCallback)
            // 结束心跳
            heartCheck.reset();
            reconnect();
            tryTimes++
        });
}

function reconnect() {
    if (tryTimes > 180) {
        alert("重连次数以达上限 连接失败")
        return;
    }
    reconnectTimer = setTimeout(function () { //没连接上会一直重连，设置延迟避免请求过多
        connect();
    }, 10000);
}

function sendMessage() {
    //stomp协议规定是用son格式传输 所以解析和发送都是json
    //要发送的数据写成json格式 然后用JSON.stringify解析成字符串形式传输给服务器
    stompClient.send('/user/hart/' + userid + '/message', {},
        JSON.stringify({'content': 'ping'}));
}

//手动关闭连接
function disconnect() {
    console.log("断开连接")
    if (stompClient !== null) {
        heartCheck.reset();
        clearTimeout(reconnectTimer)
        stompClient.disconnect();
    }
    //断开连接成功之后的操作...
    setConnected(false);
    console.log("Disconnected");
}

//心跳检测与重连
var heartCheck = {
    timeout: 10000, //10s发一次心跳
    timeoutObj: null,
    serverTimeoutObj: null,
    reset: function () {
        clearTimeout(this.timeoutObj);//清除定时任务
        clearTimeout(this.serverTimeoutObj);
        return this;
    },
    start: function () {
        var self = this;
        this.timeoutObj = setTimeout(function () {
            //这里发送一个心跳到后端指定路由，后端该路径收到将再发一条消息到前端指定路由，从而完成一次交互（消息content可以为空 只要能到达路由就可以）
            stompClient.send('/user/hart/' + userid + '/message', {}, JSON.stringify({'content': 'ping'}));
            console.log("ping!")
            //如果超过一定时间还没重置才会执行到这，说明后端主动断开了
            self.serverTimeoutObj = setTimeout(function () {
                disconnect();
                connect();
            }, self.timeout)
        }, self.timeout)
    }
}


function showGreeting(message) {
    $("#greetings").append("<tr><td>" + message + "</td></tr>");
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $("#connect").click(function () {
        connect();
    });
    $("#disconnect").click(function () {
        disconnect();
    });
    $("#send").click(function () {
        sendMessage();
    });
});

